<template>
  <div class="home-container">
    <!-- 欢迎卡片 -->
    <div class="welcome-card">
      <el-card>
        <template #header>
          <div class="welcome-header">
            <el-avatar :size="50" :src="user.avatar || 'http://t0v265sy9.hd-bkt.clouddn.com/7aba3182-78a7-434b-a144-c1cd21589c77.jpg'" />
            <div class="welcome-text">
              <h2>欢迎您，{{ user.username }}</h2>
              <p>{{ greetingText }}</p>
            </div>
          </div>
        </template>
      </el-card>
    </div>

    <!-- 统计数据卡片 -->
    <div class="stat-cards">
      <el-row :gutter="20">
        <el-col :span="6" v-for="stat in statistics" :key="stat.title">
          <el-card shadow="hover" :body-style="{ padding: '20px' }">
            <div class="stat-card-content">
              <el-icon :size="30" :class="stat.icon"><component :is="stat.icon" /></el-icon>
              <div class="stat-info">
                <div class="stat-value">{{ stat.value }}</div>
                <div class="stat-title">{{ stat.title }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 走马灯图片展示 -->
    <div class="carousel-section">
      <el-card>
        <el-carousel :interval="3000" type="card" height="300px">
          <el-carousel-item v-for="image in carouselImages" :key="image.id">
            <el-image
              :src="image.url"
              fit="cover"
              class="carousel-image"
            >
              <template #error>
                <div class="image-slot">
                  <el-icon><Picture /></el-icon>
                </div>
              </template>
            </el-image>
            <div class="carousel-caption">
              <h3>{{ image.title }}</h3>
              <p>{{ image.description }}</p>
            </div>
          </el-carousel-item>
        </el-carousel>
      </el-card>
    </div>



    <!-- 最新订单列表 -->
    <!-- <div class="recent-orders">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>最新订单</span>
            <el-button type="primary" link>查看全部</el-button>
          </div>
        </template>
        <el-table :data="recentOrders" style="width: 100%">
          <el-table-column prop="orderId" label="订单号" width="180" />
          <el-table-column prop="customerName" label="客户名称" width="180" />
          <el-table-column prop="amount" label="金额" width="180">
            <template #default="scope">
              ¥{{ scope.row.amount.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template #default="scope">
              <el-tag :type="getOrderStatusType(scope.row.status)">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" />
        </el-table>
      </el-card>
    </div> -->

  </div>
</template>

<script setup>
import { ref, onMounted, computed, reactive } from 'vue'
import { Sunny, ShoppingCart, User, Goods, Money } from '@element-plus/icons-vue'
import request from "@/utils/request";

// 用户信息
const user = JSON.parse(localStorage.getItem('user') || '{}')
const token = localStorage.getItem('token');

// 问候语
const greetingText = computed(() => {
  const hour = new Date().getHours()
  if (hour < 6) return '夜深了，请注意休息！'
  if (hour < 9) return '早上好，开启活力的一天！'
  if (hour < 12) return '上午好，工作顺利！'
  if (hour < 14) return '中午好，请适当休息！'
  if (hour < 17) return '下午好，继续加油！'
  if (hour < 19) return '傍晚好，记得活动一下！'
  return '晚上好，不要太劳累！'
})

//初始值
const data = reactive({
  todayOrders: 0,
  activeUsers: 0,
  totalProducts: 0,
  totalAmount: 0
});


// 统计数据
const statistics = ref([
  { title: '今日订单', value: 0, icon: 'ShoppingCart' },
  { title: '活跃用户', value: 0, icon: 'User' },
  { title: '餐品总数', value: 0, icon: 'Goods' },
  { title: '订单总金额', value: 0, icon: 'Money' }
])


const loadStatistics = async () => {
  try {
    const res = await request.get('/statistics/overview')
    statistics.value = [
      { title: '今日订单', value: res.data.todayOrders, icon: 'ShoppingCart' },
      { title: '活跃用户', value: res.data.activeUsers, icon: 'User' },
      { title: '餐品总数', value: res.data.totalProducts, icon: 'Goods' },
      { title: '订单总金额', value: `¥${res.data.totalAmount.toFixed(2)}`, icon: 'Money' }
    ]

  } catch (error) {
    console.error('获取统计数据失败：', error)
  }
}

// 走马灯图片
const carouselImages = ref([
  {
    id: 1,
    url: 'https://pic.52112.com/180705/JPG-180705_127/SuFPmuRObr_small.jpg',
    title: '美味早餐',
    description: '开启活力一天的健康选择'
  },
  {
    id: 2,
    url: 'https://img.shetu66.com/2023/06/12/1686542844665474.jpg',
    title: '午间套餐',
    description: '丰富搭配，营养均衡'
  },
  {
    id: 3,
    url: 'https://img.shetu66.com/2022/11/20/1668959868349080.jpg',
    title: '精品晚餐',
    description: '享受美味的夜晚时光'
  },
  {
    id: 4,
    url: 'https://p0.itc.cn/q_70/images03/20221115/c98371a2d3854349a89851e0cf9157e9.jpeg',
    title: '特色小食',
    description: '随时随地的美味享受'
  }
])

/**
 * 调用方法获取后台数据,视图打开自动调用该方法
 */
onMounted(() => {
  loadStatistics();
});

// 最新订单
// const recentOrders = ref([])
// const loadRecentOrders = async () => {
//   try {
//     const res = await request.get('/order/recent')
//     recentOrders.value = res.data
//   } catch (error) {
//     console.error('获取最新订单失败：', error)
//   }
// }


// 页面加载时获取数据
// onMounted(() => {
//  loadWeather()
//   loadStatistics()
//   loadRecentOrders()
// })



</script>

<style scoped>
.home-container {
  padding: 20px;
}

.welcome-card {
  margin-bottom: 20px;
}

.welcome-header {
  display: flex;
  align-items: center;
  gap: 20px;
}

.welcome-text {
  flex-grow: 1;
}

.welcome-text h2 {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

.welcome-text p {
  margin: 5px 0 0;
  color: #909399;
}

.weather-info {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #409EFF;
}

.stat-cards {
  margin-bottom: 20px;
}

.stat-card-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-info {
  flex-grow: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-title {
  color: #909399;
  font-size: 14px;
}

.carousel-section {
  margin-bottom: 20px;
}

.carousel-image {
  width: 100%;
  height: 100%;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 15px;
}

.carousel-caption h3 {
  margin: 0;
  font-size: 18px;
}

.carousel-caption p {
  margin: 5px 0 0;
  font-size: 14px;
  opacity: 0.8;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: #f5f7fa;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-carousel__item {
  border-radius: 6px;
  overflow: hidden;
}
</style>